<style type="text/css">
ul.todo_flow
{
	margin:0px;
	padding:0px;	
}

ul.todo_flow li
{
	display: block;
	list-style: disc;
	line-height:25px;
	vertical-align: text-bottom;
	padding-bottom:3px;
	border-bottom: 1px solid #f3f3f3;
	margin-bottom:5px;
	white-space: wrap;
	word-wrap: break-word;
	word-break: break-all;
}

ul.todo_flow li:last-child,ul.todo_flow.nodata li
{
	border:0px;
}

ul.todo_flow li a
{
	color:#666;
}


ul.todo_flow li.star a
{
	color: #0194C4;
}

ul.todo_flow li.done a
{
	text-decoration: line-through;
	color:#aaa;
}

.flow_block
{
	padding:10px;
	border: 1px solid #eee;
	background: white;
	width: 180px;
  	margin: 5px;
  	float: left;
  	min-height: 100px;
}



</style>
<h2 class="main_board"><?=__('PL_TODO_FLOW_TITLE')?></h2>
<div class="line"></div>
<?php
 if( isset($uids) && is_array($uids) ): ?>
	<div id="todo_flow_list">
	<?php foreach( $uids as $uiditem ): ?>
		<div id="todo_flow_<?=$uiditem['id']?>" uid="<?=$uiditem['id']?>" class="toload flow_block"></div>
	<?php endforeach; ?>
	</div>
	<script type="text/javascript">
	function be_a_queue()
	{
  		$('#todo_flow_list').masonry(
  		{
    		// options
    		itemSelector : '.flow_block',
    		columnWidth : 5,
    		animationOptions: 
    		{
    			duration: 400
  			}
  		});
	}

	function load_todo_flow()
	{
		var len = $('#todo_flow_list div.toload').length;
		if( len < 1 ) return false;

		var obj = $('#todo_flow_list div.toload').first();
		var uid = $(obj).attr('uid');
		if( parseInt(uid) < 1 ) return false;
				
		 
		var url = '?c=plugin&a=todo_flow_item&uid='+uid;
		$.post( url , {}  , function( data )
		{	
			$('#todo_flow_'+uid).html(data);
			$('#todo_flow_'+uid).removeClass('toload');
			if( len == 1 ) 
				be_a_queue();
			else
				load_todo_flow();
		} );
	}

	load_todo_flow();
	
	
	</script>
<?php endif; ?>	